<template>
  <div class="_mbbox boxgap nbox1">
    <div class="nbox2 bg5">
      <n-h3 style="margin: 0; text-align: center"
        >已使用(黄锤/绿锤/专武) 数量 {{ val.lc }}</n-h3
      >
    </div>
    <div class="mintage_main">
      <div class="mintage_left">
        <div class="show1">
          <n-flex>
            <div class="wpicon" :class="`_star${val.click.star ?? 3}`">
              <img
                v-if="val.click.name != null"
                style="max-width: 100%"
                :src="`${cfg.api}gachaimg/${val.click.name}.png`"
              />
            </div>
            <div>
              <p>{{ val.click.name }} - {{ val.click?.hero }}</p>
            </div>
          </n-flex>
          <n-flex vertical style="gap: 12px">
            <div v-if="val.click.name != null">
              <n-hr />
              <div>
                等级　<template v-if="val.click?.star">150</template
                ><template v-else>130</template>
              </div>
              <div class="mintage_ct">
                次数　{{ val.cache[val.click.name]?.level ?? 0 }} / 5
              </div>
              <n-hr />
              <div>[刻印主属性]</div>
              <div>
                <span class="mintage_ct2">攻击</span>　<span class="mintage_ct3"
                  >+15.0%</span
                >
              </div>
              <div>
                <span class="mintage_ct2">生命</span>　<span class="mintage_ct3"
                  >+15.0%</span
                >
              </div>
              <n-hr />
              <div>[刻印副属性]</div>

              <div>
                <span class="mintage_ct2"
                  >{{ val.wp[val.click?.type]?.rdn ?? "未选择" }} +{{
                    val.cache[val.click.name]?.atk?.toFixed(1) ?? 0 + "%" ?? 0
                  }}</span
                >　
                <span class="mintage_ct3">{{
                  val.wp[val.click?.type]?.rd ?? "未选择"
                }}</span>
              </div>
            </div>
            <div v-if="val.click.name != null">
              <n-button type="warning" @click="ct.ky(val.click.name)">开始刻印</n-button>
            </div>
          </n-flex>
        </div>
        <div class="show2">
          <div class="wpicon" :class="`_star${val.click.star ?? 3}`">
            <img
              v-if="val.click.name != null"
              style="max-width: 100%"
              :src="`${cfg.api}gachaimg/${val.click.name}.png`"
            />
          </div>
          <div>
            <div>
              等级　<template v-if="val.click?.star">150</template
              ><template v-else>130</template>
            </div>
            <div class="mintage_ct">
              次数　{{ val.cache[val.click.name]?.level ?? 0 }} / 5
            </div>
          </div>
          <div>
            <div>
              <span style="color: rgb(201 170 119)"
                >{{ val.wp[val.click?.type]?.rdn ?? "未选择" }} +{{
                  val.cache[val.click.name]?.atk?.toFixed(1) ?? 0 + "%" ?? 0
                }}</span
              >　
              <br />
              <span style="color: #838790">{{
                val.wp[val.click?.type]?.rd ?? "未选择"
              }}</span>
            </div>
          </div>

          <div style="width: 100%; text-align: center">
            {{ val.click.name }} - {{ val.click?.hero }}
          </div>
          <n-button
            style="width: 100%; margin-top: 5px"
            type="warning"
            @click="ct.ky(val.click.name)"
            >开始刻印</n-button
          >
        </div>
      </div>
      <div class="mintage_right">
        <div class="mtwpdiv" v-for="(item, key) in val.wp">
          <div style="width: 100%; text-align: center; font-size: 16px">
            {{ val.ss?.[key] }}类
          </div>

          <div
            class="wpicon"
            :class="`_star${item2.star ?? 3}`"
            v-for="item2 in item.data"
            @click="ct.ckwp(item2, key)"
          >
            <img style="max-width: 100%" :src="`${cfg.api}gachaimg/${item2.name}.png`" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
._star6 {
  background-image: linear-gradient(to bottom, #333e61 40%, #e3437e 100%);
}
._star6::after {
  background-color: #e3437e;
}
.mtwpdiv {
  display: flex;
  gap: 8px;
  flex-direction: row;
  margin-bottom: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.mintage_main {
  gap: 12px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0px, 1fr));
}
.mintage_left {
  grid-column: span 3;
}
.mintage_right {
  grid-column: span 7;
}
.show2 {
  display: none;
}
.mintage_left {
  padding: 8px;
  background: var(--bg5);
  gap: 6px;
  overflow: auto;
  height: 450px;
}
@media (max-width: 800px) {
  .mintage_left {
    grid-column: span 4;
  }
  .mintage_right {
    grid-column: span 6;
  }
}

@media (max-width: 600px) {
  .mintage_left {
    grid-column: span 10;
    height: auto;
    min-height: 130px;
  }
  .wpicon {
    width: 50px;
    height: 50px;
  }
  .mintage_right {
    background: rgb(61, 70, 86);
    overflow: inherit;
    height: auto;
  }
  .mintage_left .show1 {
    display: none;
  }
  .mintage_left .show2 {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    gap: 12px;
    align-items: center;
  }
  .mintage_right {
    grid-column: span 10;
  }
}

.mintage_ct3 {
  color: #57db2a;
}

.mintage_right {
  padding: 8px;
  background: var(--bg5);
  gap: 6px;
  overflow: auto;
  height: 450px;
}
.mintage_ct {
  color: #c4c403;
  text-shadow: 0 0 3px #000;
}
.mintage_ct2 {
  color: rgb(201 170 119);
}

@media (max-width: 600px) {
  .wpicon {
    width: 13vw;
    height: 13vw;
  }
}
</style>
<script>
import { getrole, getbossv2 } from "@/cfg/function.js";
import { cfg } from "@/cfg/cfg.js";
export default defineComponent({
  setup() {
    let val = reactive({
      lc: 0,
      hero: [],
      ss: {
        heal: "恢复能力",
        hp: "生命值",
        chr: "暴击抗性",
        chc: "暴击率",
        skill: "技能伤害",
        atk: "攻击",
      },
      wp: {
        heal: {
          name: "恢复能力",
          rd: "(3.0%-15.0%)",
          rdn: "恢复能力",
          data: [],
        },
        hp: {
          name: "生命值",
          rd: "(3.0%-15.0%)",
          rdn: "生命",
          data: [],
        },
        chr: {
          name: "暴击抗性",
          rd: "(2.0%-10.0%)",
          rdn: "暴击抗性",
          data: [],
        },
        chc: {
          name: "暴击率",
          rd: "(2.0%-10.0%)",
          rdn: "暴击率",
          data: [],
        },
        skill: {
          name: "技能伤害",
          rd: "(9.0%-45.0%)",
          rdn: "技能伤害值",
          data: [],
        },
        atk: {
          name: "攻击",
          rd: "(3.0%-15.0%)",
          rdn: "攻击",
          data: [],
        },
      },
      click: {},
      cache: {},
      //概率
      babil: {
        hp: [
          {
            atk: 15.0, //数值
            babil: [2.5, 25.5, 30.5, 35.5, 100],
          },
          {
            atk: 12.0, //数值
            babil: [5, 26, 31, 36, 0],
          },
          {
            atk: 9.0,
            babil: [20, 14, 12, 11, 0],
          },
          {
            atk: 6.0,
            babil: [35, 16, 13, 10, 0],
          },
          {
            atk: 3.0,
            babil: [37.5, 18.5, 13.5, 8.5, 0],
          },
        ],
        chr: [
          {
            atk: 10.0, //数值
            babil: [2.5, 25.5, 30.5, 35.5, 100],
          },
          {
            atk: 8.0, //数值
            babil: [5, 26, 31, 36, 0],
          },
          {
            atk: 6.0,
            babil: [20, 14, 12, 11, 0],
          },
          {
            atk: 4.0,
            babil: [35, 16, 13, 10, 0],
          },
          {
            atk: 2.0,
            babil: [37.5, 18.5, 13.5, 8.5, 0],
          },
        ],
        chc: [
          {
            atk: 10.0, //数值
            babil: [2.5, 25.5, 30.5, 35.5, 100],
          },
          {
            atk: 8.0, //数值
            babil: [5, 26, 31, 36, 0],
          },
          {
            atk: 6.0,
            babil: [20, 14, 12, 11, 0],
          },
          {
            atk: 4.0,
            babil: [35, 16, 13, 10, 0],
          },
          {
            atk: 2.0,
            babil: [37.5, 18.5, 13.5, 8.5, 0],
          },
        ],
        skill: [
          {
            atk: 45.0, //数值
            babil: [2.5, 25.5, 30.5, 35.5, 100],
          },
          {
            atk: 36.0, //数值
            babil: [5, 26, 31, 36, 0],
          },
          {
            atk: 27.0,
            babil: [20, 14, 12, 11, 0],
          },
          {
            atk: 18.0,
            babil: [35, 16, 13, 10, 0],
          },
          {
            atk: 9.0,
            babil: [37.5, 18.5, 13.5, 8.5, 0],
          },
        ],
        heal: [
          {
            atk: 15.0, //数值
            babil: [2.5, 25.5, 30.5, 35.5, 100], //概率
          },
          {
            atk: 12.0, //数值
            babil: [5, 26, 31, 36, 0], //5% 26% 31% 36% 0%概率
          },
          {
            atk: 9.0,
            babil: [20, 14, 12, 11, 0],
          },
          {
            atk: 6.0,
            babil: [35, 16, 13, 10, 0],
          },
          {
            atk: 3.0,
            babil: [37.5, 18.5, 13.5, 8.5, 0],
          },
        ],
        atk: [
          {
            atk: 15.0, //数值
            babil: [2.5, 25.5, 30.5, 35.5, 100], //概率
          },
          {
            atk: 12.0, //数值
            babil: [5, 26, 31, 36, 0], //5% 26% 31% 36% 0%概率
          },
          {
            atk: 9.0,
            babil: [20, 14, 12, 11, 0],
          },
          {
            atk: 6.0,
            babil: [35, 16, 13, 10, 0],
          },
          {
            atk: 3.0,
            babil: [37.5, 18.5, 13.5, 8.5, 0],
          },
        ],
      },
    });

    let ct = reactive({});

    //计算概率
    //如果普洛米诺斯没有强化过那么根据babil[0]计算，强化1次则根据[babil[1]]

    ct.ckwp = (item2, key) => {
      //回到顶部
      window.scrollTo(0, 98);
      if (val.cache[item2.name] == null) {
        val.cache[item2.name] = {
          level: 0,
          type: key,
        };
      }
      val.click = {
        name: item2.name,
        type: key,
        star: item2.star,
        hero: item2.hero,
      };
    };

    ct.ky = (name) => {
      ct.jisuan(val.cache[name]);
    };

    //概率计算
    ct.jisuan = (wp) => {
      let level = wp.level ?? 0;
      if (wp.max == 1) {
        cfg.alert3({
          message: "该装备已经刻印满破 共消耗(黄锤/绿锤/专武)：" + wp.lc + "",
          closeOnClickOverlay: true,
        });
        return false;
      }
      if (level >= 5) {
        return false;
      }
      val.lc++;
      if (wp.lc == null) {
        wp.lc = 0;
      }
      wp.lc++;
      let babil = val.babil[wp.type];
      let mz = null;
      for (let i = 0; i < babil.length; i++) {
        const randomNum = Math.random() * 100;
        if (randomNum <= babil[i].babil[level]) {
          if (wp.atk >= babil[i].atk) {
          } else {
            wp.atk = babil[i].atk;
          }
          if (i == 0) {
            wp.max = 1;
          }
          wp.level = level + 1;
          return false;
        } else {
          if (i >= 4) {
            if (wp.atk >= babil[i].atk) {
            } else {
              wp.atk = babil[i].atk;
            }
            wp.level = level + 1;
          }
        }
      }
    };

    onMounted(async () => {
      await getrole();
      val.hero = cfg.role;
      val.hero.forEach((item) => {
        const star = parseInt(item.star);
        if (item?.zw_1 != null) {
          if (star >= 6) {
            val.wp[item.zw_1.ky]?.data.push({
              name: item.zw_1.name + `(开花)`,
              icon: item.icon,
              hero: item.name,
              star: 6,
            });
          } else {
            val.wp[item.zw_1.ky]?.data.push({
              name: item.zw_1.name,
              icon: item.icon,
              hero: item.name,
            });
          }
        }
        if (item?.zw_2 != null) {
          val.wp[item.zw_2.ky]?.data.push({
            name: item.zw_2.name,
            icon: item.icon,
            hero: item.name,
          });
        }
      });
    });

    return {
      val,
      cfg,
      ct,
    };
  },
});
</script>
